<template>
  <div class="admin_layout">
    <!-- 左边菜单 -->
    <aside>
        <div><img src="../assets/blog_logo.png" alt="" width="100%"></div>
        <!-- <ul class="menu">
            <li>
                <a href="#">文章管理</a>
                <ul class="item">
                    <li> <a href="#/admin/article/list">文章列表</a></li>
                    <li> <a href="#/admin/article/add">文章添加</a></li>
                </ul>
            </li>
            <li>
                <a href="#">文章分类管理</a>
                <ul  class="item">
                    <li> <a href="#">分类列表</a></li>
                    <li> <a href="#">分类添加</a></li>
                </ul>
            </li>
        </ul> -->
        <el-menu
            class="menu"
            default-active="/admin/article/list"
            router
            :default-openeds="['/admin/article/','/admin/category/','/admin/setting/']"
        >
            <!-- 子菜单—-->
            <el-submenu index="/admin/article/">
                <!--菜单(主菜单的标题)) -->
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>文章管理</span>
                </template>
                
                <!--菜单对就的 子菜单菜单项 -->
                <!-- 如果想让 菜单支持路由跳转， 1在menu 中添加 router属性，2.在menu-item-上指定index属性
                     index="/admin/article/list" /admin/article/list 路由url
                 -->
                <el-menu-item index="/admin/article/list">
                    <i class="el-icon-menu"></i>
                    <span slot="title">文章列表</span>
                </el-menu-item>

                <el-menu-item index="/admin/article/add">
                    <i class="el-icon-menu"></i>
                    <span slot="title">添加文章</span>
                </el-menu-item>
            </el-submenu>

            <el-submenu index="/admin/category/">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>分类管理</span>
                </template>
                
                <el-menu-item index="/admin/category/list">
                    <i class="el-icon-menu"></i>
                    <span slot="title">分类列表</span>
                </el-menu-item>

                <el-menu-item index="/admin/category/add">
                    <i class="el-icon-menu"></i>
                    <span slot="title">添加分类</span>
                </el-menu-item>
            </el-submenu>

            <el-submenu index="/admin/setting/">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>设置</span>
                </template>
                
                <el-menu-item index="/admin/setting/editUser">
                    <i class="el-icon-menu"></i>
                    <span slot="title">修改个人信息</span>
                </el-menu-item>

                <el-menu-item @click="logout">
                    <i class="el-icon-menu"></i>
                    <span slot="title">退出登录</span>
                </el-menu-item>
            </el-submenu>

        </el-menu>
  
    </aside>
    <!-- 导航对应的内容 -->
    <div class="main">
        <!-- 根据左边的菜单，显示 内容 到右边。 -->
        <!-- /admin/articel/list 子路由组件显示的位置 -->
        <router-view/>
    </div>
  </div>
</template>

<script>
    import http from '../utils/http'

    export default {
        methods:{
            async logout(){
                // 思路：
                // 1.请求接口
                // 2.保存后端给我们的token（过期）
                // 3.提示信息
                // 4.跳到登录页面

                console.log('222')
                // A
                let res = await http.get("/api/users/logout")
                console.log(res)
                let result = res.data;
                let token = result.token; //拿到后端给我们的

                // B - 让token失效，下次直接进后台，就会提示过期
                let obj = JSON.parse( localStorage.getItem("blog_users")) //取出来
                obj.token = token; //修改
                localStorage.setItem("blog_users",JSON.stringify(obj)) //再存进去
                
                localStorage.setItem("is_login",0) // 0 未登录，1登录

                // C
                this.$message({
                    type:"success",
                    message:result.msg
                })

                // D
                // this.$router.push("/login")
                this.$router.push({name:'login'})

            }
        }
    }
</script>

<style lang="less" scoped>
.admin_layout{
    width: 100%;
    display: flex;

    // 左边
    aside{
        flex-basis: 260px;
        height: 100vh;
        // border-right:3px dashed orangered;
        .menu{
            list-style:none;
            height: 100vh;
            
            // margin-left: 15px;

            .item{
                margin-top: 15px;
            }
        }
    }

    // 右边
    .main{
        flex:1 1 auto;
    }
}
</style>